<template>
    <el-form ref="formObj" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入用户姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子信箱" prop="email">
            <el-input placeholder="请输入电子信箱" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
            <el-date-picker
                    placeholder="请输入生日"
                    v-model="form.birthday"
                    value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item label="头像" prop="file">
            <el-upload
                    v-model:file-list="fileList"
                    style="width: 160px;height: 160px; overflow: hidden;"
                    list-type="picture-card"
                    action="#"
                    :auto-upload="false"
                    :limit="1"
                    :on-change="fileChange"
                    :on-remove="fileRemove">
                <el-icon>
                    <PictureFilled />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
                <el-radio :value="1">男</el-radio>
                <el-radio :value="0">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="CircleCheck" @click="save">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { CircleCheck, PictureFilled } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { get, post } from '@/util/axios'
import { imgPath } from '@/util'
const props = defineProps(['id'])
const emits = defineEmits(['update:show', 'getTableData'])
const formObj = ref()
const form = reactive({
    name: '',
    phone: '',
    email: '',
    birthday: '',
    sex: null,
    file: null
})
function check (rule, value, callback) {
    get('/user/check', { fieldName: rule.field, value, id: props.id }, content => {
        if (content) {
            callback()
        } else {
            callback(new Error())
        }
    })
}
const rules = reactive({
    name: [
        { required: true, message: '请输入员工姓名', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { validator: check, message: '该用户名已经被使用', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        //{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机格式', trigger: 'blur' },
        { validator: check, message: '该手机号已经被使用', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入电子信箱', trigger: 'blur' },
        //{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
        { validator: check, message: '该邮件已经被使用', trigger: 'blur' }
    ],
    birthday: [
        { required: true, message: '请选择生日', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'blur' }
    ],
    file: [
        { required: !props.id, message: '请上传头像', trigger: 'blur' }
    ]
})
const fileList = reactive([])
updateInit()
function updateInit() {
    if (props.id) {
        get(api.getById, { id: props.id }, content => {
            form.id = content.id
            form.name = content.name
            form.phone = content.phone
            form.email = content.email
            form.birthday = content.birthday
            form.sex = content.sex
            fileList.push({
                url: imgPath(content.icon)
            })
        })
    }
}
function save() {
    post(props.id ? api.update : api.add, form, content => {
        emits('update:show', false)
        emits('getTableData')
    }, formObj.value)
}
function fileChange(uploadFile) {
    form.file = uploadFile.raw
}
function fileRemove () {
    form.file = null
}
</script>

<style scoped lang="scss">
</style>